<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button type="primary" @click="opBatchComplete">批量已读</el-button>
            </div>
            <div class="right-panel">
                <el-button :icon="Search"   type="primary" @click="opBindData">查询</el-button>
                <el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
                <el-button text type="primary" @click="showCondition = !showCondition">
                    <span v-if="!showCondition">展开</span>
                    <span v-else>收起</span>
                    <vab-icon
                        class="vab-dropdown"
                        :class="{ 'vab-dropdown-active': fold }"
                        icon="arrow-up-s-line"
                    />
                </el-button>
            </div>
        </el-header>
        <el-foot v-show="showCondition">
            <vab-query-form-top-panel>
                
                <el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px">
                    <el-form-item label="发布时间" label-width="100px">
                        <el-date-picker
                            style="width: 300px"
                            v-model="queryList.logDates"
                            type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            format="YYYY-MM-DD HH:mm:ss"
                            range-separator="-"
                            unlink-panels="true"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :default-time="defaultTime"
                        />
                    </el-form-item>
                    <el-form-item label="消息标题" label-width="100px">
                        <el-input
                            placeholder="---请输入消息标题---"
                            v-model="queryList.logTitle"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="消息内容" label-width="100px">
                        <el-input
                            placeholder="---请输入消息内容---"
                            v-model="queryList.logBody"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="消息来源" label-width="100px">
                        <el-select
                            placeholder="---请选择消息来源---"
                            v-model="queryList.logSource"
                            style="width: 300px"
                        >
                            <el-option label="---请选择---" value />
                            <el-option
                                v-for="item in optionsLogSource"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="消息分类" label-width="100px">
                        <el-select
                            placeholder="---请选择消息分类---"
                            v-model="queryList.logType"
                            style="width: 300px"
                        >
                            <el-option label="---请选择---" value />
                            <el-option
                                v-for="item in optionsLogType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态" label-width="100px">
                        <el-select
                            placeholder="---请选择状态---"
                            v-model="queryList.status"
                            style="width: 300px"
                        >
                            <el-option label="---请选择---" value />
                            <el-option
                                v-for="item in optionsStatus"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="发布人" label-width="100px">
                        <el-input
                            placeholder="---请输入发布人---"
                            v-model="queryList.createName"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="通知对象" label-width="100px">
                        <el-input
                            placeholder="---请输入通知对象---"
                            v-model="queryList.fromOrgName"
                            style="width: 300px"
                        />
                    </el-form-item>
                </el-form>
            </vab-query-form-top-panel>
        </el-foot>

        <el-main class="nopadding">
                <scTable
                    ref="mytable"
                    :queryType="'notice/pages'"
                    :data="listData"
                    :queryList="queryList"
                    :column="columnList"
                    :orderList="OrderList"
                    :sort-orders="['ascending', 'descending']"
                    @selection-change="selectionChange"
                    :row-key="tableKey"
                    :key="tableKey"
                    stripe
                    border
                >
                    <el-table-column type="selection" width="50"></el-table-column>
                    <el-table-column label="序号" type="index" width="60" />
                    <template #action="{scope}">
                        <template v-if="scope.column.scopedSlots === 'logTypeDesc'">
                            <el-tag type="primary" effect="plain"  v-if="scope.row.logType==0"><el-icon><Pointer /></el-icon>业务操作</el-tag>
                            <el-tag type="success" effect="plain" v-else-if="scope.row.logType==1"><el-icon><Bell /></el-icon>消息通知</el-tag>
                            <el-tag type="warning" effect="plain" v-else-if="scope.row.logType==2"><el-icon><WarningFilled /></el-icon>异常监控</el-tag>
                            <el-tag type="danger" effect="plain" v-else-if="scope.row.logType==3"><el-icon><WarningFilled /></el-icon>预警通知</el-tag>
                        </template>
                    </template>
                    <!-- <el-table-column prop="logBody" label="消息内容"   show-overflow-tooltip></el-table-column>
                    <el-table-column prop="logSourceDesc" label="消息来源" width="110" ></el-table-column>
                    <el-table-column prop="logTypeDesc" label="消息分类" width="110" >
                        <template #default="scope">
                            <el-tag type="primary" effect="plain"  v-if="scope.row.logType==0"><el-icon><Pointer /></el-icon>业务操作</el-tag>
                            <el-tag type="success" effect="plain" v-else-if="scope.row.logType==1"><el-icon><Bell /></el-icon>消息通知</el-tag>
                            <el-tag type="warning" effect="plain" v-else-if="scope.row.logType==2"><el-icon><WarningFilled /></el-icon>异常监控</el-tag>
                            <el-tag type="danger" effect="plain" v-else-if="scope.row.logType==3"><el-icon><WarningFilled /></el-icon>预警通知</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="fromOrgName" label="通知对象" width="180" ></el-table-column>
                    <el-table-column prop="statusDesc" label="状态" width="100" >
                        <template #default="scope">
                            <div v-if="scope.row.logType==0">
                                <el-tag type="danger" effect="plain" v-if="scope.row.status==0">未处理</el-tag>
                                <el-tag type="success" effect="plain" v-else>已处理</el-tag>
                            </div>
                            <div v-if="scope.row.logType==1">
                                <el-tag type="danger" effect="plain" v-if="scope.row.status==0">未读</el-tag>
                                <el-tag type="success" effect="plain" v-else>已读</el-tag>
                            </div>
                        </template>
                    </el-table-column>-->
                    
                    <template #logTypeDesc="{row}">
                            <el-tag type="primary" effect="plain"  v-if="row.logType==0"><el-icon><Pointer /></el-icon>业务操作</el-tag>
                            <el-tag type="success" effect="plain" v-else-if="row.logType==1"><el-icon><Bell /></el-icon>消息通知</el-tag>
                            <el-tag type="warning" effect="plain" v-else-if="row.logType==2"><el-icon><WarningFilled /></el-icon>异常监控</el-tag>
                            <el-tag type="danger" effect="plain" v-else-if="row.logType==3"><el-icon><WarningFilled /></el-icon>预警通知</el-tag>
                    </template>
                    <template #statusDesc="{row}">
                            <div v-if="row.logType==0">
                                <el-tag type="danger" effect="plain" v-if="row.status==0">未处理</el-tag>
                                <el-tag type="success" effect="plain" v-else>已处理</el-tag>
                            </div>
                            <div v-if="row.logType==1">
                                <el-tag type="danger" effect="plain" v-if="row.status==0">未读</el-tag>
                                <el-tag type="success" effect="plain" v-else>已读</el-tag>
                            </div>
                    </template>

                    <el-table-column label="操作" fixed="right" align="right" width="100" >
                    <template #default="scope">
                        <el-button-group>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                @click="opShow(scope.row, scope.$index)"
                            ><el-icon><View /></el-icon> 查看</el-button>
               
                        </el-button-group>
                        
                        </template>
                    </el-table-column> 
                </scTable>
            
        </el-main>
    </el-container>

    <detail-dialog
        v-if="dialogDetail"
        ref="detailObj"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogDetail = false"
    ></detail-dialog>
    
</template>

<script>

import detailDialog from "./detail";
import publicjs from "@/api/model/publicjs";
import tool from "@/utils/tool";
import sortable  from "sortablejs";
export default {
    name: "noticeList",
    components: {
        detailDialog,
        publicjs
    },
    data() {
        return {
            dialogDetail: false,
            //审核状态
            auditState: false,
            showCondition: false,
            selectionRows: [],
            pkList: [""],
            columnList: [
                  {prop:"createTime",label:"发布时间",width:"170"},
                  {prop:"logTitle",label:"消息标题",width:"280"},
                  {prop:"logBody",label:"消息内容"},
                  {prop:"logSourceDesc",label:"消息来源",width:"110"},
                  {prop:"logTypeDesc",label:"消息分类",width:"110",slots: { customRender: 'logTypeDesc' }},
                  {prop:"fromOrgName",label:"通知对象",width:"180"},
                  {prop:"statusDesc",label:"状态",width:"100",slots: { customRender: 'statusDesc' }}
            ],
            OrderList: { },
            queryList: {
              
            },
            result: "", // 运行结果
            props1: {
                checkStrictly: true,
                emitPath: false,
            },
           
            optionsLogSource: [],//消息来源
            optionsLogType: [],//消息分类
            optionsStatus:[],//消息状态
            orgType: 1,
            tableKey:0,
            defaultTime:[
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ]
        };
    },
    methods: {

        //查看
        opShow(row) {
            this.dialogDetail = true;
            this.$nextTick(() => {
                this.$refs.detailObj.setData(row);
                this.$refs.detailObj.open("Show");
            });
        },
         //批量已读
         async opBatchComplete(){
                try {
                    console.log("selectionRows",this.selectionRows);
                    if (this.selectionRows.length > 0) {
                        let arr = [];
                        this.selectionRows.forEach(item => {arr.push(item.logId);});
 
                        this.$API.auth.PostProcessApi.post("notice/batch-status",{ LogIds: arr}).then((returnValue) => {
                            if (returnValue.status == 200) {
                                this.$message.success("操作成功");
                                this.$refs.mytable.getData();
                            } else {
                                this.$message.error("操作失败:" + returnValue.msg);
                            }
				        });
                       
                    }else {
                        this.$message.error("请选择要操作的数据");
                    }
                
                } catch (error) {
                    this.loading = false;
                }
        },
         //表格选择后回调事件
         selectionChange(selection) {
            this.selectionRows = selection;
        },
        //本地更新数据
        handleSaveSuccess(data, mode) {
            if (mode == "Add") {
                this.$refs.mytable.refresh();
            } else if (mode == "Edit") {
                this.$refs.mytable.refresh();
            }
        },
        async opBindData() {
            this.$refs.mytable.clearSort();
            this.$refs.mytable.getData();
        },
        resetSearch() {
            this.queryList = {};
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    { Codes: ["BusinessLogType","BusinessLogSource","BusinessLogStatus"] }
                );
                if (returnValue.status == 200) {
                    this.optionsLogSource = returnValue.response.find(
                        (p) => p.code == "BusinessLogType"
                    ).optionsDetails;
                    this.optionsLogType = returnValue.response.find(
                        (p) => p.code == "BusinessLogSource"
                    ).optionsDetails;
                    this.optionsStatus = returnValue.response.find(
                        (p) => p.code == "BusinessLogStatus"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        //列拖拽
        columnDropInit() {
            const _this = this;
            const wrapperTr  = document.querySelector(
                ".el-table__header-wrapper tr"
            );
            sortable.create(wrapperTr , {
                //animation: 500,
                //delay: 0,
                onUpdate: (event) => {
                    var newIndex = event.newIndex;
                    var oldIndex = event.oldIndex;
                    var div = wrapperTr.children[newIndex];
                    var oldLi = wrapperTr.children[oldIndex];
                        
                    const empty = 2;
                    // 先删除移动的节点
                    wrapperTr.removeChild(div);
                    // 再插入移动的节点到原有节点，还原了移动的操作
                    if (newIndex > oldIndex) {
                        wrapperTr.insertBefore(div, oldLi)
                    } else {
                        wrapperTr.insertBefore(div, oldLi.nextSibling)
                    }
                    // 更新items数组
                    const oldItem = this.columnList[oldIndex - empty]
                    this.columnList.splice(oldIndex- empty, 1)
                    this.columnList.splice(newIndex- empty, 0, oldItem)

                    // console.log("event",event);
                    // console.log("event.from",event.from);
                    // console.log("event.item",event.item);
                    // console.log("cells",event.to.cells);
                    // console.log("oldIndex",event.oldIndex);
                    // console.log("newIndex",event.newIndex);
                    // console.log("wrapperColumn",wrapperTr );
                    // console.log("Sortable", this.sortable );
                    // console.log("mytable", this.$refs.mytable );
                    // console.log("getCloumns",this.$refs.mytable.getCloumns());
                    // console.log("tableData",this.$refs.mytable.form.tableData);
            
                    
                
                
                    _this.$nextTick(() => {
                    
                    });
                    
                },
            });
        },
       
    },
    async mounted() {
        this.orgType = tool.data.get("USER_INFO").AccountType;
        var logId=this.$route.query.logId;
        if(logId){
            this.queryList.logId=logId
        }

        await this.initOptions();
        await this.opBindData();
       

        // 列的拖拽初始化
        this.columnDropInit();
        
        
    },
};
</script>